<template>
	
<u-navbar placeholder left-icon="" title="登录"> </u-navbar>	
	
	<view class="login_top">
		<view class="">物流录入</view>
	</view>

	<u--form labelPosition="left" :model="formState" :rules="rules" ref="loginform" class="form_state">
		<u-form-item prop="username" borderBottom>
			<up-input v-model="formState.username" placeholder="请输入手机号" class="input_item">
				<template #prefix>
					<text class="iconfont blue icon-shouji"></text>
				</template>
			</up-input>
		</u-form-item>

		<u-form-item prop="password" borderBottom>
			<up-input v-model="formState.password" placeholder="请输入密码" password class="input_item">
				<template #prefix>
					<text class="iconfont blue icon-xiugaimima"></text>
				</template>
			</up-input>
		</u-form-item>

<!-- 		<u-form-item borderBottom>
			<u-checkbox-group v-model="state.agree">
				<u-checkbox name="1"></u-checkbox>
			</u-checkbox-group>
			<view class="">我已经阅读并同意 <text  class="link_text">《用户协议》</text> </view>
		</u-form-item> -->

		<u-form-item borderBottom>
			<view @click="submitForm" class="submit_btn">登录</view>
		</u-form-item>

	<!-- 	<u-form-item borderBottom>
			<view class="center_view">没有账户? 
			<text   @click="jumpPage('/pages/register/register')"  class="link_text">立即注册</text> </view>
		</u-form-item> -->
	</u--form>

</template>

<script setup>
	import { jumpPage } from '@/common/hooks.js'
	import { loginApi } from '@/common/apis.js'
	import { reactive, ref, computed, onMounted } from 'vue';
	import { useStore } from 'vuex';
	import { onLoad } from "@dcloudio/uni-app";
	const loginform = ref()
	const store = reactive(useStore())
	const state = reactive({
		agree: ['1'],
		verifyCodeSrc:"",
	})
	const formState = reactive({
		username: "",
		password: "",
	})
	const rules = reactive({
		'username': [
				{
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
				
		],
		'password': [{
				type: 'string',
				required: true,
				message: '请填写密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				max: 16,
				message: '长度在6-16个字符之间'
			},
		],
		'verify': {
			type: 'string',
			required: true,
			message: '请填写验证码',
			trigger: ['blur', 'change']
		},

	})
	

	

	const submitForm = () => {
		loginform.value.validate().then(async () => {
			let reqdata = formState
		
			const {data:res} =await loginApi(reqdata)
			if (res.code == 200) {
				
				uni.showToast({
					title:'登录成功'
				})
				store.commit('setToken',res.data)
				setTimeout(()=>{
					jumpPage('/pages/index/index')
				},300)
				
			}
		
		}).catch(errors => {
			console.log(errors);
		})
	}
	



	onLoad((optios) => {
		if (optios.mobile) {
			formState.mobile = optios.mobile
		}
	})
</script>

<style lang='scss' scoped>
	.login_top {
		width: 100%;
		height: 105px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		image {
			width: 50px;
			height: 50px;
		}
	}

	.form_state {
		padding: 0 30px;
		padding-top: 30px;
	}

	.input_item {
		background: #F0F7FF;
		border: none;
		border-radius: 15px;
		height: 40px;

	}

	.blue {
		color: $common-blue;
		font-size: 18px;
		display: flex;
		margin: 0 15px;
	}

	.right_suffix {
		color: #fff;
		background-color: $common-blue;
		padding: 0 10px;
		height: 25px;
		border-radius: 10px;
		display: flex;
		align-items: center;
	}

	.submit_btn {
		background: $common-blue;
		color: #fff;
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		font-size: 16px;
	}

	.center_view {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.code_image {
		width: 130px;
		height: 45px;
	}
	.link_text {
		color: $common-blue;
	}
</style>